<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function(){
				//查找#bj节点
				/**
				 * 	0. 通过点击 bj 按钮得到 节点,所以我要先获取 按钮,然后给按钮绑定 单击事件
				 *  1. 获取到 id是bj的节点, getElementById
				 */
				// 获取操作的按钮节点
				var oBtn01 = document.getElementById('btn01');
				// 绑定单击事件和处理函数
				oBtn01.onclick = function(){
					//获取id是bj的节点元素
					var oBj = document.getElementById('bj');
					alert(oBj.innerText);
				}
				
				// 获取 btn02
				// var oBtn02 = document.getElementById('btn02');// 可以通过id获取
				var oBtn02 = document.getElementsByTagName('button')[1];// 也可以通过标签名获取
				oBtn02.onclick = function(){
					//查找所有li节点 TagName li
					var oLis = document.getElementsByTagName('li');
					// oLis 是一个集合类数组 可以根据数组的长度进行遍历
					console.log(oLis);
					for(var i = 0; i < oLis.length;i++){
						console.log(oLis[i]);
					}
				}
				
				/**
				 *  getElementsByName 根据name属性进行查找, 返回值是一个类数组
				 * 
				 */
				
				// 获取操作的按钮 btn03
				var oBtn03 = document.getElementById('btn03');
				// 绑定事件处理函数
				oBtn03.onclick = function(){
					//查找name=gender的所有节点  getElementsByName
					var radios = document.getElementsByName('gender');
					console.log(radios);// ByName获取的是一个集合,不能直接操作
					// for循环遍历
					for(var i = 0; i < radios.length; i++){
						// input 是单标签,没有 innerText innerHTML 属性
						// console.log(radios[i].innerText);
						// 获取input 标签的 value 属性值
						console.log(radios[i].value);
						
						//获取 class
						console.log(radios[i].className);
						
						// 获取标签的一般属性  标签元素对象.属性名
						// 如果是class        标签元素对象.className
					}
				}
				
				

				//查找#city下所有li节点
				//返回#city的所有子节点
				//返回#phone的第一个子节点
				//返回#bj的父节点
				//返回#android的前一个兄弟节点
				//读取#username的value属性值
				//设置#username的value属性值
				//返回#bj的文本值
				
			};
			
		
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>
